<template>
	<section class="bg-gray-900  h-full">
		<div class="container-custom h-full">
			<h2 class="text-lg md:text-[1.1rem] font-bold text-white text-left pt-3">关于我们</h2>
			<div class="mt-3 grid grid-cols-1 md:grid-cols-[1fr_2fr_1fr] auto-rows-fr gap-0 h-full">
				<!-- 第一行：左(口号) 中(愿景红卡) 右(空白) -->
				<div class="h-full bg-gray-800 p-4 md:p-6" data-sa data-sa-delay="100">
					<h3 class="text-lg md:text-xl font-bold text-white mb-1">我们的口号</h3>
					<p class="text-xs text-gray-300 mb-2">Slogan</p>
					<div class="w-6 h-0.5 bg-red-500 mb-2"></div>
					<p class="text-xs text-white leading-relaxed">传媒，影动，心动，跟随未来而动。</p>
				</div>

				<div class="h-full bg-red-600 p-4 md:p-6" data-sa data-sa-delay="150">
					<div class="flex flex-col md:flex-row gap-4">
						<!-- 左侧：标题区域 -->
						<div class="flex-shrink-0">
							<h3 class="text-lg md:text-xl font-bold text-white mb-1">我们的愿景</h3>
							<p class="text-xs text-white mb-2">Vision</p>
							<div class="w-6 h-0.5 bg-white mb-2"></div>
						</div>
						<!-- 右侧：正文区域 -->
						<div class="text-xs text-white leading-relaxed space-y-1">
							<p>一段故事，一个世界。</p>
							<p>我们致力于讲述这段精彩的故事，</p>
							<p>为观者打开美妙缤纷的世界大门，</p>
							<p>打造充满乐趣与新奇的万千世界。</p>
						</div>
					</div>
				</div>

				<!-- 第一行第三列空白 -->
				<div class="hidden h-full md:block"></div>

				<!-- 第二行：左(空白) 中(使命) 右(价值观) -->
				<div class="h-full hidden md:block"></div>

				<div class="h-full bg-gray-800 p-4 md:p-6" data-sa data-sa-delay="250">
					<div class="flex flex-col md:flex-row gap-4">
						<!-- 左侧：标题区域 -->
						<div class="flex-shrink-0">
							<h3 class="text-lg md:text-xl font-bold text-white mb-1">我们的使命</h3>
							<p class="text-xs text-gray-300 mb-2">Mission</p>
							<div class="w-6 h-0.5 bg-red-500 mb-2"></div>
						</div>
						<!-- 右侧：正文区域 -->
						<div class="text-xs text-white leading-relaxed space-y-1">
							<p>一段故事，一个世界。</p>
							<p>我们致力于讲述这段精彩的故事，</p>
							<p>为观者打开美妙缤纷的世界大门，</p>
							<p>打造充满乐趣与新奇的万千世界。</p>
						</div>
					</div>
				</div>

				<div class="h-full bg-[rgba(61,66,76,0.804)] p-4 md:p-6" data-sa data-sa-delay="300">
					<h3 class="text-lg md:text-xl font-bold text-white mb-1">我们的价值观</h3>
					<p class="text-xs text-gray-300 mb-2">Values</p>
					<div class="w-6 h-0.5 bg-red-500 mb-2"></div>
					<p class="text-sm text-white leading-relaxed">原创、未来、尽心、品质。</p>
				</div>
			</div>
		</div>
	</section>
</template>

<script setup>
	// 关于我们内容展示
</script>